<template>
  <div id="app" class="wrapper wrapper-content animated fadeInRight v-cloak" v-cloak>
    <div class="row">
      <div class="ibox float-e-margins">
        <div class="ibox-content col-md-12">
          <form id="riverBillboardForm" method="post" class="form m-t" @submit.prevent="save()" accept-charset="UTF-8">
            <input type="hidden" name="id" v-model="item.id"/>
            <input type="hidden" name="token" v-model="item.token"/>
            <input type="hidden" name="newFlag" v-model="newFlag"/>
            <div class="clearfix "></div>
            <div class="col-md-6 b-r">
              <div class="form-group clearfix">
                <label class="col-md-8 control-label">河道公示牌编码：</label>
                <div class="col-md-12">
                  <input id="bean-code" name="code" v-model="item.code" class="form-control" type="text"
                      placeholder="请输入河道公示牌编码" required="" aria-required="true" aria-describedby="bean-code-error"
                      maxlength="55" aria-invalid="true">
                  <span id="bean-code-error" class="help-block m-b-none" for="bean-code"></span>
                </div>
              </div>
              <div class="form-group clearfix">
                <label class="col-md-8 control-label">所在河道：</label>
                <div class="col-md-12">
                  <select data-placeholder="选择所在河道" id="bean-riverId" name="riverId" class="form-control" required=""
                      aria-required="true" aria-describedby="bean-riverId-error" aria-invalid="true">
                    <option value="">--请选择所在河道--</option>
                    <option v-if="rivers != null && rivers.length > 0"
                        v-for="(river, index) in rivers" :value="river.id"
                        :selected="river.id == item.riverId">{{ river.name }}
                    </option>
                  </select>
                  <span id="bean-riverId-error" class="help-block m-b-none" for="bean-riverId"></span>
                </div>
              </div>


              <div class="form-group clearfix">
                <label class="col-md-8 control-label">所在位置：</label>
                <div class="col-md-12">
                  <input id="bean-address" name="address" v-model="item.address" class="form-control" type="text"
                      placeholder="请输入所在位置" required="" aria-required="true" aria-describedby="bean-address-error"
                      maxlength="128" aria-invalid="true">
                  <span id="bean-address-error" class="help-block m-b-none" for="bean-address"></span>
                </div>
              </div>

              <div class="form-group clearfix">
                <label class="col-md-8 control-label">所在经度：
                  <a href="javascript:;" @click="getCoordinate()"
                      class="label label-success"><i class="fa fa-coordinate"></i>坐标拾取</a>
                </label>
                <div class="col-md-12">
                  <input id="bean-longitude" name="longitude" v-model="item.longitude" class="form-control" type="text"
                      placeholder="请输入所在经度" aria-describedby="bean-longitude-error" maxlength="32"
                      aria-invalid="true">
                  <span id="bean-longitude-error" class="help-block m-b-none" for="bean-longitude"></span>
                </div>
              </div>

            </div>
            <div class="col-md-6">

              <div class="form-group clearfix">
                <label class="col-md-8 control-label">所在纬度：</label>
                <div class="col-md-12">
                  <input id="bean-latitude" name="latitude" v-model="item.latitude" class="form-control" type="text"
                      placeholder="请输入所在纬度" aria-describedby="bean-latitude-error" maxlength="32"
                      aria-invalid="true">
                  <span id="bean-latitude-error" class="help-block m-b-none" for="bean-latitude"></span>
                </div>
              </div>

              <div class="form-group clearfix">
                <label class="col-md-8 control-label">备注：</label>
                <div class="col-md-12">
                  <textarea id="bean-memo" name="memo" class="form-control" placeholder="请输入备注"
                      aria-describedby="bean-memo-error" maxlength="255"
                      aria-invalid="true">{{item.memo}}</textarea>
                  <span id="bean-memo-error" class="help-block m-b-none" for="bean-memo"></span>
                </div>
              </div>
              <div class="form-group clearfix">
                <label class="col-md-8 control-label">图片上传 ：</label>
                <div class="col-md-12">
                  <span class="help-block m-b-none">
                    <a href="javascript:;" id="upload_btn_imgUrl"
                        class="label label-success"><i class="fa fa-upload fa-coordinate"></i> 点击上传</a>
                  </span>
                  <div id="upload_div_imgUrl" style="">
                    <div class="img-grid-2">
                      <input name="imgUrl" v-model="item.imgUrl" type="hidden">
                      <img :src="item.imgUrl" style="max-width:264px;max-height:264px">
                    </div>
                  </div>
                  <span id="bean-imgUrl-error" class="help-block m-b-none" for="bean-imgUrl"></span>
                </div>
              </div>
            </div>
            <div class="clearfix "></div>
            <div class="col-12 text-center" style="height: 50px;">
              <div>
                <input class="btn btn-primary" type="submit" value="保存"/> | <a @click="lbox.closeMyBoxLayer()" class="btn btn-danger" href="javascript:">返回</a>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
import '@/assets/css/style.css'

import $ from '@/assets/js/jquery-vendor.js'
import 'jquery.cookie'
import axios from 'axios'
import '@/assets/js/validate/validation-vendor.js'

import '@/assets/css/upload.css'
import '@/assets/js/upload_single_pic.js'
import {apiUtil, axiosContentType, site} from '@/assets/js/boss'

export default {
  data() {
    return {
      item: {},
      rivers: [],
      newFlag: 0,
      uuidToken: ''
    }
  },
  mounted() {
    let that = window.$vueApp = this;
    document.getElementsByTagName('body')[0].className = 'fixed-sidebar full-height-layout';
    $('#riverBillboardForm').validate();
    that.staff.init(function () {
      that.newFlag = sessionStorage.getItem(site.riverBillboard.info);
      if (that.newFlag) that.uuidToken = apiUtil.guid();
      if (apiUtil.existSessionKey(site.riverBillboard.info)) {
        that.info();
      }
    });
    that.riverList();
    window.upload_single_pic('upload_btn_imgUrl', 'upload_div_imgUrl', 'png,jpg,gif,bmp', 'imgUrl');
  },
  methods: {
    info() {
      let that = this;
      axios.get(site.riverBillboard.info + sessionStorage.getItem(site.riverBillboard.info), {}).then(function (response) {
        const result = response.data;
        if (result.code === 0) {
          that.item = result.data;
        } else {
          alert(result.message);
        }
      });
    },
    riverList() {
      let that = this;
      axios.get(site.riverInfo.list, {}).then(function (response) {
        var result = response.data;
        if (result.code === 0) {
          that.rivers = result.data;
        } else {
          alert(result.message);
        }
      });
    },
    save() {
      let that = this;
      if ($('#riverBillboardForm').valid()) {
        axios.post(site.riverBillboard.save, $('#riverBillboardForm').serialize(),
            axiosContentType.xWwwFormUrlencoded).then(function (response) {
          const result = response.data;
          // console.info("获取数据.." + JSON.stringify(result));
          if (result.code === 0) {
            parent.$vueApp.page();
            alert('保存成功!');
            that.lbox.closeMyBoxLayer()
          } else {
            alert(result.message);
          }
        });
      }
    },
    getCoordinate() { // 坐标拾取页面
      this.lbox.openMyBoxLayer('经纬度坐标拾取', site.map.mapll);
    },
    setMapSite(longitude, latitude, address) { // 坐标拾取回调
      $('#bean-longitude').val(longitude);
      $('#bean-latitude').val(latitude);
      this.item.longitude = longitude;
      this.item.latitude = latitude;
    }
  }
}
</script>

